<template>
    <!-- 多选 -->
    <el-select
        v-model="dataOfSelect"
        multiple
        placeholder="请选择"
        style="width: 100%"
        @change="toSelect">
        <el-option
            v-for="item in bodyData"
            :key="item.code"
            :label="item.name"
            :value="item.code"
            >
        </el-option>
    </el-select>

</template>

<script lang="ts" setup>
import { ref,defineEmits,defineExpose } from 'vue';
import $kt from '@/vueKantboot';
import { ElMessage, ElMessageBox } from 'element-plus';

let emits = defineEmits(['select']);

let dataOfSelect = ref([]);

let setRoleCodes = (res:any)=>{
    console.log(res,"---");
    dataOfSelect.value = res;
}

let toSelect = (res:any)=>{
    emits("select",dataOfSelect.value);
}

let open = ()=>{
}


let bodyData = ref({
    "code":"admin",
    "name":"管理员",
});

// 获取所有角色 /system-user-web/role/getAll
let getBodyData = () =>{
    $kt.request.request({
        url: '/system-user-web/role/getAll',
        method: 'post'
    }).then((res: any) => {
        bodyData.value = res.data.data;
        // 删除掉管理员
        bodyData.value.forEach((item:any,index:number)=>{
            if(item.code=="admin"){
                bodyData.value.splice(index,1);
            }
        });

    }).catch((err: any) => {
        ElMessage.error(err.msg);
    });
}

getBodyData();


defineExpose({
    open,
    setRoleCodes
})




</script>

<style lang="scss" scoped>


.box {
    padding: 20px 20px 0 20px;
}

.box-box {
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 30px;
    border-radius: 5px;
}


.box-box:hover {
    // 变小
    transform: scale(0.95);
}

.box-box:active {
    // 变小
    transform: scale(0.9);
}
</style>